﻿<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SuKi 登录/注册</title>

<link rel="stylesheet" href="css/style.css">
  <script src="js/index.js"></script>
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/ajax.js"></script>
  <script src="js/reglogin.js"></script>

</head>
<body>
<div style="text-align:center;margin:0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
<div class="cotn_principal">
  <div class="cont_centrar">
    <div class="cont_login">
      <div class="cont_info_log_sign_up">
        <div class="col_md_login">
          <div class="cont_ba_opcitiy">
            <h2>登录</h2>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
            <button class="btn_login" onClick="cambiar_login()">登录</button>
          </div>
        </div>
        <div class="col_md_sign_up">
          <div class="cont_ba_opcitiy">
            <h2>注册</h2>
            <p>Lorem ipsum dolor sit amet, consectetur.</p>
            <button class="btn_sign_up" onClick="cambiar_sign_up()">注册</button>
          </div>
        </div>
      </div>
      <div class="cont_back_info">
        <div class="cont_img_back_grey"> <img src="po.jpg" alt="" /> </div>
      </div>
      <div class="cont_forms" >
        <div class="cont_img_back_"> <img src="po.jpg" alt="" /> </div>
        <div class="cont_form_login"> <a href="#" onClick="ocultar_login_sign_up()" ><i class="material-icons">&#xE5C4;</i></a>
          <h2>登录</h2>
          <input type="text" placeholder="用户名" id="user1" required/>
          <input type="password" placeholder="密码" id="pass1" required/>
          <button class="btn_login"  id="btn1" onClick="cambiar_login()">登录</button>
          <br>
          <br>
          <h5><a href="javascript:void(0)" style="color: #aac4bc;text-decoration: none"  id="btn_showlogin" onclick="shogMinLogin()">忘记密码</a></h5>
        </div>
        <div class="cont_form_sign_up"> <a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
          <h2>注册</h2>
          <input type="text" placeholder="用户名" id="user" required/>
          <input type="password" placeholder="密码（不少于6位）" id="pass" required style="background-repeat: no-repeat; border:0px;background-position-x: 240px;background-position-y: 15px;"/>
          <input type="password" placeholder="确认密码" id="pass2" required/>
          <p>   </p>
          <p class="xieyi">点击「注册」按钮，即代表你同意<a href="javascript:void(0)" onclick="show()" class="xieyi2">《SuKi协议》</a></p>
          <button class="btn_sign_up" id="btn" onClick="cambiar_login()">注册</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 弹出登录小窗口 -->
<div class="mini_login" id="mini_login">
  <!-- 表单 -->
  <form action="" method="post">
    <div class="item firstLine" id="firstLine">
      <span class="login_title">找回密码</span>
      <span class="login_close" id="close_minilogin">X</span>
    </div>
    <div class="item">
      <input type="text" name="uname" placeholder="请输入用户名" id="user3" class="item1"/>
    </div>
    <div class="item">
      <input type="text" name="upwd" placeholder="点击“找回密码”获取密码" id="pass3" class="item2"/>
    </div>
    <div class="item">
      <a href="javascript:void(0)" class="btn_login" onclick="" id="btn3">找回密码</a>
    </div>
  </form>
</div>
<!-- 遮罩层 -->
<div class="cover"></div>

<script>
  function show(){
    Ajax('read.txt?datetime=new Date.getTime ',
            function(str){
              alert(str);
            },
            function(){
              alert('失败了');
            })
  };
</script>


<style>
  /* 弹出 样式 */
  .mini_login{
    display:none;
    position:absolute;
    z-index:2;
    background:white;
    height: 450px;
  }
  .mini_login .item{
    width:320px;
    margin:0 auto;
    height:48px;
    line-height:48px;
    padding:0 20px;
  }
  /* 登录窗第一行*/
  .mini_login .firstLine{
    color:#666;
    background:#f7f7f7;
    font-size:18px;
    font-weight:bold;
    cursor:move;
  }
  .mini_login .item .login_close{
    display:inline-block;
    float:right;
    cursor:pointer;
  }

  .mini_login .item label{
    font-size:14px;
    margin-right:15px;
  }
  .mini_login .item input{
    display:inline-block;
    width:70%;
  }
  .item1{
    height: 80%;
    margin-top: 20px;
  }
  .item2{
    height: 100%;
    margin-top: 30px;
  }
  /* 登录按钮 */
  .mini_login .item a.btn_login{
    display:block;
    margin-top: 60px;
    height:30px;
    line-height:30px;
    width:80%;
    background:yellowgreen;
    color:white;
    font-size:16px;
    text-align:center;
    text-decoration: none;
  }
  /* 遮罩层样式 */
  .cover{
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background-color:#000;
    opacity:0.7;
  }
  .xieyi{
    font-size: 12px;
    color: #999999;
  }
  .xieyi2{
    text-decoration: none;
    color: cornflowerblue;
  }
</style>
</body>
</html>

